<template>
  <div class="sidebar-container">
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#1890ff"
        mode="vertical"
        router
      >
        <el-menu-item v-for="item in myRoutes" :key="item.path" :index="item.path">
          <i class="el-icon-menu"></i>
          <span slot="title">{{item.meta.title}}</span>
        </el-menu-item>
      </el-menu>
    </el-scrollbar>
  </div>
</template>
<script>
export default {
  data () {
    return {
      myRoutes: [{ path: '/home', meta: { title: '首页' }}, {  path: '/article', meta: { title: '文章列表' }}],
    }
  },
  computed: {
    activeMenu() {
      return this.$route.path
    },
  }
}
</script>
<style lang="scss" scoped>
  .sidebar-container {
    transition: width 0.28s;
    width: 240px;
    background-color: #304156;
    height: 100%;
    position: fixed;
    font-size: 0px;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    overflow: hidden;

    .scrollbar-wrapper {
      overflow-x: hidden !important;
    }
    .el-menu {
      border: none;
      height: 100%;
      width: 100% !important;
    }
  }
</style>